<template>
  <div>
      <header>
          <div class="head">
                <div>
                    <span @click="goinformation">◀ </span>
                    <img src="../../static/home9.png" alt="" @click="gohome">
                </div>
                <span>详 情</span>
          </div>
      </header>
      <div class="content">
            <div class="cont">
                <h1>聚焦万达南，远见宿豫CLD未来</h1>
                <div class="cont1">
                    <span>2021-06-28</span>
                    <span>宿迁房产网</span>
                    <span>来源：宿迁房产网原创</span>
                </div>
                <div class="cont2">
                    楼盘动态
                </div>
                <div class="cont3">
                    2021年6月28日，<span>宿迁房产网</span>讯：<span>碧桂园·江山赋</span>位于主城区，目前在售21#22#23#高层13#14#叠墅7#大平层，6.26已加推6#叠墅16#大平层和24#高层，共计162套房源，6#均价14381元/㎡（毛坯），16#均价13853元/㎡（毛坯），24#均价14364元/㎡（精装）。以上信息仅供参考，具体信息以售楼处公布为准，有意者可电话咨询售楼处
                </div>
                <div class="cont4">
                    <img src="https://images.sqfcw.com/attachment/ue/20210628/f53c2ed961464cdf5604f3df31db270e5ab475bc.jpeg?x-oss-process=style/w_800" alt="">
                </div>
                <div class="cont5">
                    1、宿迁房产网作为平台，旨在为满足广大用户的信息需求而提供，并非商业性或盈利性用途；页面内容如有侵权或原作者不愿刊登，请及时通知本站予以删除。2、本页所载内容不代表宿迁房产网观点和立场，仅供参考和借鉴。3、除此以外，将本站任何内容或服务用于其他用途时，须征得本网及相关权利人许可，否则本站依法保留追究权。
                </div>
                <div class="cont6">
                    <img src="https://images.sqfcw.com/attachment/ue/20210628/ef1b751a9b48cd6173c658b094c55af961b93351.gif?x-oss-process=style/w_8001" alt="">
                </div>
                <div class="cont7">
                    随着宿迁城市东进的步伐加快，优质资源的聚集整合，属于宿豫的CLD中央居住区也将诞生崛起。
                </div>
            </div>
            <div class="more">
                <div class="more_title">更多好文</div>
                <div class="more_list">
                    <div class="more_lis" v-for="item in listdata" :key="item">
                        <div class="lis_left">
                            <h2>{{item.title}}</h2>
                            <div>
                                <span>{{item.address}}</span>
                                <span>{{item.time}}</span>
                            </div>
                        </div>
                        <div class="lis_right">
                            <img :src="item.img" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            listdata:[
                {
                    img:'https://images.sqfcw.com/attachment/information/20210617/5808e7cc2287bb56421bc5f5df1b0aae7a425030.jpeg?x-oss-process=style/w_240',
                    title:'聚焦万达南，远见宿豫CLD未来',
                    time:'3小时前',
                    address:'宿迁桂碧园.九州府'
                },
                {
                    img:'https://images.sqfcw.com/attachment/information/20210617/5808e7cc2287bb56421bc5f5df1b0aae7a425030.jpeg?x-oss-process=style/w_240',
                    title:'碧桂园·江山赋：热销中',
                    time:'3小时前',
                    address:'宿迁桂碧园江山赋'
                },
                {
                    img:'https://images.sqfcw.com/attachment/information/20210617/5808e7cc2287bb56421bc5f5df1b0aae7a425030.jpeg?x-oss-process=style/w_240',
                    title:'宿迁北京路快速化改造工程项目开工了',
                    time:'5小时前',
                    address:'恒大湖山半岛'
                },
                {
                    img:'https://images.sqfcw.com/attachment/information/20210617/5808e7cc2287bb56421bc5f5df1b0aae7a425030.jpeg?x-oss-process=style/w_240',
                    title:'3年内，宿迁7万户农村居民将喜提新房',
                    time:'一个月前',
                    address:'华地·学府宸樾'
                }
            ]
        }
    },
    methods: {
        goinformation:function(){
            wx.navigateTo({
                url:'/pages/information/index'
            })
        },
        gohome:function(){
            wx.switchTab({
                url:'/pages/home/index'
            })
        }
    },
}
</script>

<style lang="scss" scoped>
header{
    width: 100%;
    background: linear-gradient(90deg, rgb(5,117,241), rgb(27,137,247), rgb(55,163,255));
}
.head{
    width: 90%;
    margin: 0 auto;
    height: 160rpx;
    line-height: 150rpx;
    font-size: 20px;
    color: #fff;
    display: flex;
    >div{
        width: 150rpx;
        height: 50rpx;
        border: 1px solid #fff;
        border-radius: 50rpx;
        margin-top: 50rpx;
        display: flex;
        >span{
            width: 75rpx;
            height: 80%;
            margin-top: 3%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border-right: 1px solid #fff;
            font-size: 12px;
        }
        >img{
            width: 30rpx;
            height: 55%;
            margin-top: 10rpx;
            margin-left: 20rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            
        }
    }
    >span:nth-child(2){
        margin-left: 26%;
        font-size: 16px;
    }
}
.content{
    width: 100%;
    margin-bottom: 60rpx;
    .cont{
        width: 84%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        >h1{
            font-size: 24px;
            margin: 40rpx 0;
            line-height: 60rpx;
        }
        .cont1{
            display: flex;
            font-size: 12px;
            color: rgb(153,153,153);
            line-height: 60rpx;
            >span{
                margin-right: 10rpx;
            }
        }
        .cont2{
            font-size: 12px;
            color: rgb(153,153,153);
            line-height: 60rpx;
            margin-bottom: 30rpx;
        }
        .cont3{
            font-weight: 700;
            line-height: 50rpx;
            >span{
                color: rgb(239,165,175);
                text-decoration: underline;
            }
        }
        .cont4,.cont6{
            width: 100%;
            height: 400rpx;
            margin: 30rpx 0;
            >img{
                width: 100%;
                height: 100%;
            }
        }
        .cont5{
            font-size: 12px;
            color: rgb(153,153,153);
            line-height: 50rpx;
        }
        .cont7{
            font-weight: 700;
            line-height: 50rpx;
        }
    }
    .more{
        width: 84%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        .more_title{
            font-size: 20px;
            margin-top: 40rpx;
        }
        .more_list{
            display: flex;
            flex-direction: column;
            .more_lis{
                width: 100%;
                height: 290rpx;
                border-bottom: 1px solid rgb(235,235,235);
                display: flex;
                align-items: center;
                justify-content: space-between;
                .lis_left{
                    width: 420rpx;
                    height: 160rpx;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    >h2{
                        font-size: 16px;
                    }
                    >div{
                        display: flex;
                        font-size: 12px;
                        color: rgb(153,153,153);
                        >span{
                            margin-right: 16rpx;
                        }
                    }
                }
                .lis_right{
                    width: 190rpx;
                    height: 160rpx;
                    >img{
                        width: 100%;
                        height: 100%;
                        border-radius: 14rpx;
                    }
                }
            }
        }
    }
}

</style>